﻿﻿<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta id="eqMobileViewport" name="viewport" content="width=device-width,
          initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <meta name="format-detection" content="email=no">
  <title>景区介绍</title>
  <link href="../styles/page-animation.css" rel="stylesheet" type="text/css">

  <style type="text/css">
    * {
      margin: 0;
      outline: 0;
      padding: 0;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
    }

    a {
      text-decoration: none;
      -webkit-tap-highlight-color: rgba(0,0,0,.35);
    }

    html {
      height: 100%;
      -webkit-text-size-adjust: 100%;
    }

    body {
      width: 100%;
      height: 100%;
      font-family: 'Microsoft Yahei',Tahoma,Helvetica,Arial,sans-serif;
      font-size: 62.5%;
      font-weight: 300;
      line-height: 1.231;
      position: relative;
      text-align: center;
    }

    ul, li {
      list-style: none;
    }

    a {
      -webkit-tap-highlight-color: transparent;
    }

    .container {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    .page {
      position: absolute;
      width: 100%;
      height: 100%;
      background-size: cover;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      overflow: hidden;
    }

    .bg1 {
      background-image: url(images/bg1.png);
      background-repeat: no-repeat;
      z-index: 1;
    }

    .circle {
      position: absolute;
      width: 200px;
      height: 200px;
      left: 50%;
      top: 50%;
      margin-left: -100px;
      margin-top: -100px;
      border-radius: 50%;
      background: rgba(255, 255, 255,0.4);
      -webkit-animation: zoomIn 4s 1s 1 linear normal both;
    }

    .scenic-name {
      position: absolute;
      width: 160px;
      height: 115px;
      top: -10px;
      left: -20px;
    }

    .stamp {
      position: absolute;
      width: 50px;
      height: 65px;
      top: 60px;
      left: 135px;
    }

    .poetry {
      position: absolute;
      width: 190px;
      height: 50px;
      top: 130px;
      left: 18px;
    }

    .trigger {
      position: fixed;
      width: 40px;
      height: 40px;
      right: 10px;
      bottom: 10px;
    }

      .trigger .icon {
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
        transition: opacity 0.3s, transform 0.3s;
      }

        .trigger .icon rect {
          stroke: #dbdbdb;
          stroke-width: 2px;
          -webkit-animation: fadeIn 4s 0s infinite ease-in-out both;
          animation: fadeIn 4s 0s infinite ease-in-out both;
        }


    @-webkit-keyframes fadeIn {
      0% {
        fill: rgba(0,0,0,0);
      }

      25% {
        fill: rgba(0,0,0,0.25);
      }

      50% {
        fill: rgba(0,0,0,0.5);
      }

      75% {
        fill: rgba(0,0,0,0.25);
      }

      100% {
        fill: rgba(0,0,0,0);
      }
    }

    @keyframes fadeIn {
      0% {
        fill: rgba(0,0,0,0);
      }

      25% {
        fill: rgba(0,0,0,0.25);
      }

      50% {
        fill: rgba(0,0,0,0.5);
      }

      75% {
        fill: rgba(0,0,0,0.25);
      }

      100% {
        fill: rgba(0,0,0,0);
      }
    }


    .bg2 {
      background-image: url(images/bg.png);
      background-repeat: no-repeat;
      z-index: 2;
    }

    .info {
      padding: 2% 6%;
      color: #fafafa;
      line-height: 150%;
      clear: both;
      font-size: 12px;
      text-align: justify;
    }

    .scenic-list {
      margin: 15px 0 10px;
      padding: 2%;
    }

      .scenic-list li {
        margin: 1%;
        width: 47%;
        border-radius: 5px;
        height: 150px;
        display: inline-block;
        position: relative;
      }

        .scenic-list li .annular-round {
          border-radius: 50%;
          width: 110px;
          height: 110px;
          padding: 2px;
          top: 8px;
          left: 50%;
          margin-left: -54px;
          background-color: rgba(255, 255, 255,0.5);
          position: absolute;
        }

        .scenic-list li img {
          border-radius: 50%;
          width: 100%;
          height: 100%;
        }

        .scenic-list li span {
          left: 0;
          top: 130px;
          width: 100%;
          text-align: center;
          color: #fff;
          position: absolute;
          font-family: KaiTi;
          z-index: 1;
          font-size: 16px;
        }

    .slide-down {
      -webkit-animation: slideDown 2s 0.8s 1 linear normal both;
      animation: slideDown 2s 0.8s 1 linear normal both;
    }

    /*@media screen and (max-height: 490px) {
            .info {
                font-size: 12px;
            }
        }

        @media screen and (max-height: 550px) and (min-height:490px) {
            .info {
                font-size: 14px;
            }
        }*/

    @-webkit-keyframes zoomIn {
      0% {
        -webkit-transform: scale3d(0, 0, 1);
        opacity: 0.6;
      }

      100% {
        -webkit-transform: scale3d(1, 1, 1);
        opacity: 1;
      }
    }

    @keyframes zoomIn {
      0% {
        -webkit-transform: scale3d(0, 0, 1);
        opacity: 0.6;
      }

      100% {
        -webkit-transform: scale3d(1, 1, 1);
        opacity: 1;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <section class="page bg1">
      <div class="circle">
        <img class="scenic-name" src="images/scenic_name.png" />
        <img class="stamp" src="images/stamp.png" />
        <img class="poetry" src="images/poetry.png" />
      </div>
      <span class="trigger">
        <svg width="100%" height="100%" viewBox="0 0 60 60" preserveAspectRatio="none">
          <g class="icon">
            <rect x="32.5" y="5.5" width="22" height="22" />
            <rect x="4.5" y="5.5" width="22" height="22" />
            <rect x="32.5" y="33.5" width="22" height="22" />
            <rect x="4.5" y="33.5" width="22" height="22" />
          </g>
        </svg>
      </span>
    </section>
    <section class="page bg2" style="display:none;">
      <ul class="scenic-list">
        <li>
          <a href="wolongwan.html">
            <div class="annular-round">
              <img src="images/scenic1.jpg" />
            </div>
            <span>卧龙湾</span>
          </a>
        </li>
        <li>
          <a href="yueliangwan.html">
            <div class="annular-round">
              <img src="images/scenic2.jpg" />
            </div>
            <span>月亮湾</span>
          </a>
        </li>
        <li>
          <a href="shenxianwan.html">
            <div class="annular-round">
              <img src="images/scenic3.jpg" />
            </div>
            <span>神仙湾</span>
          </a>
        </li>
        <li>
          <a href="guanyutai.html">
            <div class="annular-round">
              <img src="images/scenic4.jpg" />
            </div>
            <span>观鱼台</span>
          </a>
        </li>
      </ul>
      <div class="info"><span style="font-size: 16px; font-weight: bold;">&nbsp;&nbsp;&nbsp;&nbsp;喀纳斯</span>，一个美丽富饶、神秘莫测的地方，在这里壮观的冰川映衬着宁静的湖水、茫茫的草原包容着幽深的原始森林。神秘的湖怪、古朴的土瓦人、变换的湖水、眩人的风景会让人痴迷。生活在都市的你，可以适时的停下脚步，背上背包，在这片净土上和自己的心来一次徒步之旅。</div>
    </section>
  </div>
  <script src="../javaScripts/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
        var hash = document.location.hash;
        function renderViewport() {
            var f = 1,
                e,
                g = $(document).width(),
                h = $(document).height();
            g / h >= 320 / 486 ? (f = h / 486) : (f = g / 320, e = (h / f - 486) / 2);
            $("#eqMobileViewport").attr("content", "width=320, initial-scale=" + f + ", maximum-scale=" + f + ", user-scalable=no");
        }

        function showPage() {
            if (!hash) {
                document.location.hash = "page2";
            }
            $(".bg2").addClass("slide-down").show();
        }

        $(function () {
            renderViewport();
            if (hash == "#page2") {
                $('.bg1').hide();
                $('.bg2').show();
            }
            else {
                var timer = setTimeout(showPage, 10000);
                $(".trigger").on('click', function () {
                    if (timer) {
                        clearTimeout(timer);
                    }
                    showPage();
                });
            }
        });
  </script>
</body>
</html>